<template>
  <div>
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="goback()"
    />
    <h4>视频详情列表</h4>
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    >
  <van-cell v-for="item in videosList" :key="item.id" :title="item.name" @click="goPlayVideo(item.id)" />
</van-list>
  </div>
</template>

<script>
import { getVideosByCategoryId } from '@/api/getVideosByCategoryId'
export default {
  name: 'VideoDetail',
  data () {
    return {
      finished: false,
      loading: false,
      categoryId: '',
      videosList: []
    }
  },
  created () {
    this.categoryId = this.$route.params.categoryId
    this.getVideoDetail(this.categoryId)
    this.finished = true
  },
  methods: {
    goback () {
      this.$router.back()
    },
    async getVideoDetail (categoryId) {
      const res = await getVideosByCategoryId(categoryId)
      this.videosList = res.data.records
    },
    goPlayVideo (videoId) {
      this.$router.push('/playVideo/' + videoId)
    }
  }
}
</script>

<style>
  h4{
    text-align: center;
  }
</style>
